<template>
  <div class="login-section">
    <el-form
      :model="form"
      :rules="rules"
      ref="loginForm"
      label-width="80px"
      size="normal"
    >
      <el-form-item label="用户名" prop="name">
        <el-input
          type="text"
          v-model="form.name"
          prefix-icon="el-icon-s-custom"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitFrom">登录</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { login, getUserInfo } from "@/apis/user.js";
export default {
  name: "Login",
  data() {
    return {
      // 用户数据
      form: {
        name: "",
        password: "",
      },
      // 校验规则
      rules: {
        name: [
          {
            required: true, //规定是必填项
            message: "请输入用户名", //不符合校验条件的提示
            trigger: "blur", //触发条件
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 点击按钮登录
    submitFrom() {
      // 前端校验数据 用户名和密码，是否输入了用户名和密码
      this.$refs.loginForm.validate((valid) => {
        // 如果校验通过
        if (valid) {
          // 向后端发送用户名和密码
          login({
            // ...this.form,
            name: this.form.name,
            password: this.form.password,
          }).then((res) => {
            // 通过res中的code值来做鉴别，值为0说明没有错误
            console.log(res);
            if (res.code === 0) {
              // 登录成功
              this.$message.success(res.mes);
              // 将token存储到本地
              localStorage.setItem("token", res.data.token);
              // 存储个人信息
              getUserInfo().then((res) => {
                this.$store.commit("changeUserInfo", res.data);
              });
              // 跳转至首页
              this.$router.push("/");
            } else {
              // 登录失败，消息提示登录失败
              this.$message.error(res.mes);
            }
          });
        } else {
          // 未输入用户名或密码提示登录失败
          console.log("登录失败!");
          return false;
        }
      });
    },
    // 点击按钮表单清空重置
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
  },
};
</script>

<style lang="stylus" scoped>
.login-section {
  padding: 0px 20px;
}
</style>